<template>
    <div class="playList">
        <!-- <div class="playList-top"> -->
            <h1>官方歌单</h1>
        <!-- </div> -->
        <!-- <ul>
            <li v-for="item in playListData" :key="item.id">
                <img :src="item.cover" alt="">
                <span>{{item.title}}</span>
            </li>
        </ul> -->
        <div class="wrapper" ref="wrapper">
      <ul class="content" ref="content">
        <li v-for="item in playListData" :key="item.content_id" @click="selectPlayList(item)">

           <div class="cover-num">
                 <img :src="item.cover" alt="">
                 <span>{{(item.listen_num/10000)|numFilter(2)}}万</span> <!-- 过滤器 -->
                 <!-- 播放量 -->
           </div>

                <span>{{item.title}}</span>
        </li>
      </ul>
    </div>


        
    </div>
</template>

<script>
import axios from 'axios'
import BScroll from "better-scroll";
export default {
    data(){
        return{
            playListData:[]
        }
    },
    methods:{
        getPlayList(){
            axios.get("/api/recommend/playlist/u")
            .then(res => {
                console.log(res.data.data.list)
                this.playListData=res.data.data.list
                this.betterScrollHorizontal(this.playListData.length,160)
            })
            .catch(err => {
                console.error(err); 
            })

        },
       betterScrollHorizontal(num,itemWidth){
           let width =num*itemWidth;
           this.$refs.content.style.width=width+"px";
           this.$nextTick(()=>{
               this.scroll=new BScroll(this.$refs.wrapper,{
                   click:true,
                   startX:0,
                   scrollX:true,//水平横向滚动
                   scrollY:false //默认锤子滚动
               })
           });
           


       },
       selectPlayList(item){
           const id=item.content_id
        //    this.$router.push({
        //        name:'PlayListDetail',
        //        params:{id}

        //    })
        this.$router.push({
            path:`/playlistdetail/${id}`
        })

       }
    },

    mounted(){
        this.getPlayList()
    },
    // <!-- 过滤器 -->
       filters:{
       numFilter(value,num){
           return parseFloat(value).toFixed(num)
       }
    //    <!-- 过滤器 -->
   }
    
}
</script>
<style scoped>
.playList{
    width: 90%;
    margin: 0 auto;
}
.playList>h1{
    font-size: 20px;
    text-align: left;
}
.wrapper{
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    /* 超出部分隐藏 */
}
ul.content>li{
width: 160px;
display: inline-block;
text-align: center;
vertical-align: top;
}
ul.content>li img{
    width: 95%;
    border-radius: 8px;
}
ul.content>li>span{
   display: block;
   width: 90%;
   margin: 0 auto;
   font-size: 12px;
 
}
.cover-num{
    position: relative;
    /* 相对定位 */
}
.cover-num>span{
    font-size: 15px;
    background-color: rgba(128, 128, 128, 0.507);
    position: absolute;
    /* 绝对定位 */
    right: 5px;
    bottom: 5px;
    z-index: 100px;
    /* 优先级 */
    border-radius: 5px;
    display: block;
    width: 100px;
}

</style>